<template>
  <div>
    <!-- 业务错误码分布统计 -->
    <div ref="dataInterfaceCall" style="width: 100%; height: 300px">
      `12123
      <!-- <div id="" style="width: 100%; height: 300px"> -->
      <!-- <el-table :data="tableData" style="width: 100%;height: 300px;">
        <el-table-column prop="address" type="index" label="排名" min-width="90">
        </el-table-column>
        <el-table-column prop="ip" label="IP地址" min-width="90">
        </el-table-column>
        <el-table-column prop="count" label="调用次数" min-width="90">
        </el-table-column>
      </el-table> -->
    </div>
  </div>
</template>
<script>
import { getErrId } from "@/utils/httpUtils";
import * as echarts from "echarts";
export default {
  data() {
    return {
      datas: {
        "apiId": "1",
        "monitorQueryType": "Api_Usage",
        "userId": "1",
        "version": "",
        "dateFrom": "now-1w",
        "dateTo": "now",
        "page": "1",
        "size": "10",
        "fieId": "",
        "order": ""
      },
      myChart: null,
      currentDate: "",

    };
  },
  mounted() {
    this.getVisitsData();
  },
  methods: {
    getVisitsData() {

      const chartDom = this.$refs.dataInterfaceCall;
      this.myChart = echarts.init(chartDom);
      let _this = this
      getErrId(this.datas).then((res) => {


        let xData = []
        let yData = []
        res.data.map(function (item) {
          console.log(item);
          xData.push(item.ip)
          yData.push(item.count)
        })
        console.log(xData, yData);
        //获取DOM节点并初始化
        const echarts = require("echarts");
        const myChart = echarts.init(this.$refs.dataInterfaceCall);
        const option = {
          color: "#01FFCD",
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "3%",
            right: "7%",
            bottom: "3%",
            top: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            // axisLabel: {
            //   show: false,
            // },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: '#fff'
            },
            data: xData
          },
          yAxis: {
            type: "value",
            axisLabel: {
              textStyle: {color: "#FFFFFF"},
            },
            // data: xData,
            // splitLine: {
            //   show: false,
            // },
            // axisLine: {
            //   show: false,
            //   interval: 0,
            // },
            // axisTick: {
            //   show: false,
            // },
          },
          series: [
            {
              name: "访问量",
              type: "bar",
              data: yData,
              label: {
                normal: {
                  show: true,
                  position: "top",
                },
              },
              itemStyle: {
                normal: {
                  color: function (params) {
                    let colorlist = [
                      '#FA897B', '#FFDD94', '#D0E6A5', '#FFDD94', '#4675C0', '#B8BFD6', '#FFA876'
                    ]
                    let colorItem = colorlist[params.dataIndex]
                    return colorItem
                  }
                }
              },
              barWidth: 30, // 设置柱子宽度
            },
          ],
        };
        myChart.setOption(option);


      });
    },
  },
};
</script>
